<template lang="pug">
  div.page.page-1
    div.side-bar.left
      ModuleIndustrialBase
      ModuleEnvironmentalGovernance
      ModuleLandProcess
    div.center
       ModuleMedicalData
       ModuleAnimalHusbandry
       ModuleVegetables
    div.side-bar.right
      ModulePesticideLicense
      ModuleAgriculturePromote
      ModuleRegulatory
</template>

<script>
import ModuleMedicalData from "./components/ModuleMedicalData";
import ModuleAnimalHusbandry from "./components/ModuleAnimalHusbandry";
import ModuleVegetables from "./components/ModuleVegetables";
import ModuleIndustrialBase from "./components/ModuleIndustrialBase";
import ModuleEnvironmentalGovernance from "./components/ModuleEnvironmentalGovernance";
import ModuleLandProcess from "./components/ModuleLandProcess";
import ModulePesticideLicense from "./components/ModulePesticideLicense";
import ModuleAgriculturePromote from "./components/ModuleAgriculturePromote";
import ModuleRegulatory from "./components/ModuleRegulatory";
import {mapMutations} from "vuex";

export default {
  name: "index",
  components: {
    ModuleMedicalData,//三资监管指标
    ModuleAnimalHusbandry,//畜牧产品质量监测检疫
    ModuleVegetables,//蔬菜水果质量
    ModuleIndustrialBase,//高标准农田建设情况
    ModuleEnvironmentalGovernance,//土地流转
    ModuleLandProcess,//土地经营权抵押贷款登记
    ModulePesticideLicense,//科技人才培训
    ModuleAgriculturePromote,//农药、兽药经营许可
    ModuleRegulatory,//支农惠农
  },
  data() {
    return {
      MedicalData: [
        {
          label: '集体经济组织',
          value: 0,
          suffix: "户",
          fontSize: 50
        },
        {
          label: '集体经济组织',
          value: 0,
          suffix: "人",
          fontSize: 30
        },
        {
          label: '新建集体经济组织',
          value: 0,
          suffix: "个",
          fontSize: 30
        },
        {
          label: '代管资金',
          value: 0,
          suffix: "万元",
          fontSize: 30
        },
        {
          label: '村委会资金',
          value: 0,
          suffix: "万元",
          fontSize: 30
        },
        {
          label: '组织资金',
          value: 0,
          suffix: "万元",
          fontSize: 30
        },
      ],
    }
  },
  methods: {
    ...mapMutations({
      // 设置点位
      setMarkers: 'map/SET_MARKERS',
      // 清除点位
      clearMarkers: 'map/CLEAR_MARKERS',
      setNetworkError: 'network/SET_NETWORK_ERROR',
    }),
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.page-1 {
  flex: 1;
  display: flex;
  background-color: rgba(0, 0, 0, .5);
  backdrop-filter: blur(5px);

  .side-bar {
    min-width: rem(400);
    display: flex;
    flex-direction: column;

    &.right {
      width: rem(400);
    }
  }

  .center {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 rem(20) rem(50);
    .module{
      position: relative;
      z-index: 2;
      background-color: rgba(255, 255, 255, .1);
      & + .module{
        margin-top: rem(40);
      }
    }
  }
}
</style>
